<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{ title }}</h2>
    <p>
        组件就是用户自定义的标签，既然是标签，那么我们可以尝试在标签的内部存放数据
    </p>
    <p>
        slot 是 vuejs 内置的一个组件，用于显示组件调用时候内部传递的数据
    </p>
    <p>
        一般面板组件都有头部、内部、底部
    </p>
    <p>我们现在希望存在一种机制，可以使用组件的内容显示的时候顺序不是由调用方进行可以随意改动的，该如何处理？</p>

    <p>在template里面使用 slot 的时候可以使用 name 属性为其指定一个名称</p>
    <p>
        在组件的调用处，我们可以通过 slot 属性来决定调用哪一个 slot
    </p>

    <i-panel>
        <template v-slot:header>
            <div>我是头部信息</div>
        </template>
        <template #cnt>
            <div >我是内容</div>
        </template>
        <b slot="footer">我是自己的footer</b>
        <i slot="default">其他的内容</i>
    </i-panel>

</div>
</body>

<template id="showTmp">
    <div>
        <slot name="header"></slot>
        <slot name="cnt"></slot>
        <slot name="footer">【我是默认值】</slot>
        <slot name="default"></slot>
        <slot></slot>
        <slot></slot>
    </div>
</template>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    Vue.component('i-panel', {
        data() {
            return {
                money: 1000,
            }
        },
        template: '#showTmp',

    })

    const vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 组件的插槽',
        }
    })
</script>

</html>
